<template>
  <div id="conpon">
    <top-bar :title="title"></top-bar>
    <p class="coupon_no" @click="couponBtn_no()">
      不使用任何优惠券
      <span :class="{active:coupon_type=='coupon_no'}"></span>
    </p>
    <div v-if="isShow" style="padding-top:5px">
      <div class="conpon_list" v-for="(item,index) in conponData" :key="index" @click="couponBtn(item.user_coupon_id,item.coupon_title,index)">
        <div class="conpon_list_left">
          <p class="conponMoney" v-if="item.money_type=='1'">
            <span>{{item.money}}</span>元
          </p>
          <p class="conponMoney" v-else>
            <span>{{item.money}}</span>折
          </p>
          <p class="conponMoneyText">{{item.use_limit}}</p>
        </div>
        <div class="conpon_list_right">
          <p class="conponText">{{item.coupon_title}}</p>
          <p class="conponName">{{item.use_scope}}</p>
          <p class="conponTime">{{timestampToTime(item.useful_time_begin)}}-{{timestampToTime(item.useful_time_end)}}</p>
          <span :class="{active:coupon_type==item.user_coupon_id}"></span>
        </div>
        <div style="clear:both"></div>
        <div class="conpon_list_bottom">
          <p>{{item.remark}}</p>
        </div>
      </div>
    </div>
    <div v-else>
      <p class="conponNo">
        <img src="@/assets/imgs/yhq_kb.png" />
      </p>
      <p class="conpon_number">没有更多可用优惠券了</p>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/yhq_next.svg';
import { Tabs, TabBar, Icon, Dialog, Toast } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import Utils from '@/common/pakjUtils';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [TabBar.name]: TabBar,
    [Toast.name]: Toast
  },
  data() {
    return {
      title: '使用优惠券',
      isShow: true,
      conponData: [],
      coupon_type: '',
      isUsecoupon: sessionStorage['iscoupon'] || '3'
    };
  },
  created() {
    let params = {
      order_no: this.$route.query.order_no
    };
    Loading.show();
    http.post('pakj/coupon/getCouponListByOrderId', params).then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        if (res.data.data.length === 0) {
          this.isShow = false;
        }
        this.conponData = res.data.data;
        console.log(res.data);
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
    if (sessionStorage['iscoupon'] === '2') {
      this.coupon_type = 'coupon_no';
    } else if (sessionStorage['iscoupon'] === '1') {
      this.coupon_type = this.$route.query.coupon_id;
    }
  },
  methods: {
    // 使用优惠券
    couponBtn(couponId, couponTitle, index) {
      this.coupon_type = couponId;
      sessionStorage['iscoupon'] = '1';
      let query = {
        orderno: this.$route.query.order_no,
        coupon_id: couponId,
        coupon_title: couponTitle
      };
      this.$router.push({
        name: 'OrderPaymentPay',
        query: query
      });
    },
    // 不使用优惠券
    couponBtn_no() {
      this.coupon_type = 'coupon_no';
      sessionStorage['iscoupon'] = '2';
      let query = {
        orderno: this.$route.query.order_no
      };
      this.$router.push({
        name: 'OrderPaymentPay',
        query: query
      });
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      // h = date.getHours() + ':';
      // m = date.getMinutes() + ':';
      // s = date.getSeconds();
      return Y + M + D;
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#conpon {
  height: 100vh;
  background-color: color-primary-background;
}

.exchangetext {
  color: #666;
  font-size: 28px;
}

.conpon_list {
  margin: 20px 30px 0px 30px;
  background-color: #fff;
  border-top: 6px #FF6917 solid;
  border-radius: 7px;
  position: relative;
}

.conpon_list_left {
  float: left;
  margin-left: 30px;
  margin-top: 30px;
}

.conpon_list_right {
  float: left;
  margin-top: 24px;
  margin-left: 60px;
}

.conpon_list_right span {
  display: inline-block;
  background-color: #fff;
  width: 36px;
  height: 36px;
  border: 1px solid #e3e3e3;
  border-radius: 50%;
  position: absolute;
  top: 80px;
  right: 30px;
}

.conpon_list_right span.active {
  background: url('../../assets/imgs/ddzf_icon_pre@2x.png') no-repeat center center;
  background-size: contain;
  border-color: #fff;
  width: 36px;
  height: 36px;
}

.conpon_list_bottom {
  margin-top: 26px;
  margin-left: 18px;
  margin-right: 18px;
  font-size: 22px;
  color: #999;
  padding-bottom: 20px;
}

.conponMoney {
  color: #FF6917;
  font-size: 28px;
}

.conponMoney span {
  font-size: 64px;
}

.conponMoneyText {
  font-size: 24px;
  color: #666;
}

.conponText {
  font-size: 32px;
  color: #ff6917;
}

.conponName {
  font-size: 26px;
  color: #333;
  margin-top: 10px;
}

.conponTime {
  font-size: 24px;
  color: #999;
  margin-top: 12px;
}

.conpon_number {
  margin-top: 34px;
  color: #999;
  font-size: 24px;
  text-align: center;
}

.conpon_number span {
  margin-left: 10px;
  border-left: solid 1px #ccc;
  padding-left: 10px;
}

.conponBtn {
  margin: 80px 96px 0px 96px;
  height: 98px;
  line-height: 98px;
  color: #666;
  font-size: 32px;
  text-align: center;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  border: 2px solid #ccc;
}

.conponmore {
  margin: 80px 96px 0px 96px;
  height: 98px;
  line-height: 98px;
  color: #fff;
  font-size: 32px;
  text-align: center;
  background-color: #ff6917;
  border-radius: 10px;
}

.conponNo {
  margin-top: 150px;
  text-align: center;
}

.conponNo img {
  width: 50%;
}

.yhq_next {
  position: relative;
  left: 8px;
  top: 1px;
  width: 18px;
  height: 20px;
}

.coupon_no {
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  color: #333;
  padding: 0px 30px;
  background-color: #fff;
  margin-top: 20px;
}

.coupon_no span {
  display: inline-block;
  background-color: #fff;
  width: 36px;
  height: 36px;
  border: 1px solid #e3e3e3;
  border-radius: 50%;
  position: relative;
  top: 20px;
  float: right;
}

.coupon_no span.active {
  background: url('../../assets/imgs/ddzf_icon_pre@2x.png') no-repeat center center;
  background-size: contain;
  border-color: #fff;
  width: 36px;
  height: 36px;
}
</style>
